<template>
  <div>
    <transition name="dialog-fade">
      <div class="fade" v-if="showDtl" >
        <div class="dtl-bg">
          <button class="close-btn" @click="toShowDtl"></button>
          <img :src="dtlImgSrc" alt="">
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'signDtl',
  props: ['showDtl', 'dtlImgSrc'],
  data () {
    return {}
  },
  watch: {},
  components: {},
  computed: {},
  methods: {
    toShowDtl () {
      this.$emit('toShowDtl')
    }
  },
  created () {},
  mounted () {}
}
</script>
<style lang='scss' scoped>
.fade {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.dtl-bg {
  position: fixed;
  width: 644px;
  height: 644px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-image: url(../assets/images/tangram-bg.png);
  background-size: 100% 100%;
  z-index: 11;
  img {
    height: 800px;
    width: 800px;
  }
}
.close-btn {
  position: absolute;
  right: -10px;
  top: -48px;
  width: 69px;
  height: 69px;
  background: url(../assets/images/close-btn.png) no-repeat;
  background-size: 100% 100%;
  z-index: 11;
}
</style>
